<div class=" page-title area-col-white detail-page-title">
  <!-- <a (click)="cancel()"><i class="fas fa-angle-left"></i>返回列表</a>
  <span>创建函数</span> -->

  <nz-breadcrumb nzSeparator=" ">
    <nz-breadcrumb-item>
      <a (click)="cancel()" class="breadcrumb_link">
        <i nz-icon nzType="arrow-left" nzTheme="outline" class="breadcrumb_i"></i>
      </a>
    </nz-breadcrumb-item>
    <nz-breadcrumb-item>
      <span class="head-05 text-col-title">创建函数</span>
    </nz-breadcrumb-item>
  </nz-breadcrumb>



</div>
<div class="form-fieldset form-horizontal form-align-left" style="margin-bottom: 50px;">
  <ng-container *ngIf="!isTemplateDetail">
    <nzi-form [formName]="functionForm" #functionFormComponent>
      <form nz-form [formGroup]="functionForm">
        <nz-form-item>
          <nz-form-label>创建方式</nz-form-label>
          <nz-form-control>
            <nz-radio-group formControlName="createType" [(ngModel)]="createType"
              (ngModelChange)="createTypeChange($event)">
              <label nz-radio-button *ngFor="let item of createTypeList"
                [nzValue]="item.createTypeCode">{{item.createTypeName}}</label>
            </nz-radio-group>
          </nz-form-control>
        </nz-form-item>
        <ng-container *ngIf=" !isTemplateList ">
          <nz-form-item>
            <nz-form-label>区域</nz-form-label>
            <nz-form-control>
              <nz-radio-group formControlName="regionCode" [(ngModel)]="regionCode">
                <label nz-radio-button *ngFor="let item of regionList"
                  [nzValue]="item.regionCode">{{item.regionName}}</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item *ngIf="createType==='template' && checkedTplId">
            <nz-form-label>模板</nz-form-label>
            <nz-form-control>
              <span class="space-right">{{ checkedTplName }}</span>
              <span><a (click)="useOtherTpl()">使用其他模板</a></span>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label>应用</nz-form-label>
            <nz-form-control>
              <nz-select formControlName="groupId" [nzShowSearch]="true" nzShowSearch nzPlaceHolder="请选择应用"
                [nzLoading]="isLoadingApplication" nzNotFoundContent="没有可用的应用" (nzOnSearch)="searchValueChange($event)"
                [nzAutoClearSearchValue]="false" [(ngModel)]="selectApplicationId"
                (nzOpenChange)="expandApplicationChange($event)" (ngModelChange)="applicationIdChange($event)">
                <nz-option *ngFor="let object of applicationList" [nzLabel]="object.displayName" [nzValue]="object.id">
                </nz-option>
              </nz-select>
              <nz-form-explain *ngIf="notFind" class="from-help tip-text">
                没有查询到该应用，将自动创建
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label>函数名称<span class="required-icon">*</span></nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="functionName" placeholder="请输入函数名称" [maxlength]="20"
                [readonly]="isReadonly">
              <nz-form-explain style="display:block;margin-left:0;"
                *ngIf="functionForm.get('functionName').dirty && functionForm.get('functionName').errors&&!functionForm.get('functionName').hasError('duplicated')"
                class="from-help">
                由小写字母、数字和中划线组成，长度为 2-20 个字符，以小写字母开头，以小写字母或数字结尾
               
              </nz-form-explain>
              <nz-form-explain *ngIf="functionForm.get('functionName').dirty&&functionForm.get('functionName').hasError('duplicated')">
                该名称已存在
              </nz-form-explain>
              <nz-form-explain *ngIf="!functionForm.get('functionName').dirty || !functionForm.get('functionName').errors">
                由小写字母、数字和中划线组成，长度为 2-20 个字符，以小写字母开头，以小写字母或数字结尾
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label nzFor="description">描述</nz-form-label>
            <nz-form-control>
              <textarea nz-input rows="4" formControlName="description" placeholder="请输入函数描述"></textarea>
              <nz-form-explain >
                最大支持500个英文字母、数字、空格、逗号、句号、中文</nz-form-explain>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label>运行环境</nz-form-label>
            <nz-form-control>
              <nz-list style="width: 700px" [nzDataSource]="runtimeList" [nzRenderItem]="item" [nzSize]="'small'"
                [nzGrid]="{gutter: 0, xs: 24, xl: 4 }">
                <ng-template #item let-item>
                  <nz-list-item (click)="runtimeChange(item)" [nzContent]="nzContent">
                    <ng-template #nzContent>
                      <nz-card tabindex="1" style="padding: 10px" [ngStyle]="setShadow(item.key)" nzHoverable
                        [nzCover]="coverTemplate">
                        <nz-card-meta style="text-align: center" nzTitle="{{item.value}}"></nz-card-meta>
                      </nz-card>
                      <ng-template #coverTemplate>
                        <svg class="icon icon-runtime" aria-hidden="true">
                          <use [attr.xlink:href]="item.icon"></use>
                        </svg>
                      </ng-template>
                    </ng-template>
                  </nz-list-item>
                  <div *ngIf="isCodeLoading || (createType === 'template' && runtime !== item.key)"
                    style="width: 100%;height: 100%;position: absolute;top: 0;left: 0;cursor: not-allowed;z-index: 9999;">
                  </div>
                </ng-template>
              </nz-list>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item *ngIf="runtime != RuntimeCustomContainer">
            <nz-form-label>函数入口<span class="required-icon">*</span></nz-form-label>
            <nz-form-control>
              <input nz-input formControlName="handler" [placeholder]="handlerPlaceHolder" [maxlength]="255">
              <nzi-help *ngIf="runtime?.indexOf('python') >= 0"
                [options]="{'title':'Handler 格式为 [文件名].[函数名]<br/>例如创建函数时指定的 Handler 为 index.handler，那么文件名为 index.py，入口函数为 handler。'}">
              </nzi-help>
              <nzi-help *ngIf="runtime?.indexOf('nodejs') >= 0"
                [options]="{'title':'Handler 格式为 [文件名].[函数名]<br/>例如创建函数时指定的 Handler 为 index.handler，那么文件名为 index.js，入口函数为 handler。'}">
              </nzi-help>
              <nzi-help *ngIf="runtime?.indexOf('golang') >= 0" [options]="{'title':'Go 的函数入口为可执行二进制文件的文件名称。'}">
              </nzi-help>
              <nzi-help *ngIf="runtime?.indexOf('java') >= 0"
                [options]="{'title':'Handler 的格式为 [package].[class]::[method]。例如包名是 example，类名是 HelloFC，那么创建函数时指定的 Handler 为 example.HelloFC::handleRequest。'}">
              </nzi-help>
            </nz-form-control>
          </nz-form-item>

          <ng-container *ngIf="runtime == RuntimeCustomContainer">
            <nz-form-item>
              <nz-form-label nzRequired>选择镜像<span class="required-icon">*</span></nz-form-label>
              <nz-form-control>
                <nz-select class="form-input" formControlName="containerImage" nzPlaceHolder="请选择镜像" nzShowSearch
                  [nzLoading]="imageListLoading">
                  <nz-option *ngFor="let option of cirImageList" [nzLabel]="option.image" [nzValue]="option.image">
                  </nz-option>
                  <nz-option nzLabel="正在加载" nzValue="" nzDisabled *ngIf="imageListLoading"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label>Command</nz-form-label>
              <nz-form-control>
                <input nz-input formControlName="containerCommand" placeholder="请输入容器启动命令">
                <nz-form-explain *ngIf="!getInvalidMessage('containerCommand')">
                  string array，如：["python", "server.py"]
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label>Args</nz-form-label>
              <nz-form-control>
                <input nz-input formControlName="containerArgs" placeholder="请输入容器启动参数">
                <nz-form-explain *ngIf="!getInvalidMessage('containerArgs')">
                  string array，如：["--port", "8080"]
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label>监听端口</nz-form-label>
              <nz-form-control>
                <input nz-input formControlName="containerPort" placeholder="8080">
                <nz-form-explain>
                  端口范围 1~65535，不可使用端口 8012、8013、8022、9090、9091、9092。
                </nz-form-explain>
              </nz-form-control>
            </nz-form-item>
          </ng-container>

          <nz-form-item>
            <nz-form-label>超时时间</nz-form-label>
            <nz-form-control>
              <nz-input-number formControlName="timeout" [nzMin]="3" [nzMax]="600" nz-popover nzContent="3-600秒"
                [nzStep]="1">
              </nz-input-number>秒
              <nzi-help [options]="{'title':'函数运行时长达到指定的超时时间后，函数会被自动中断，并暂停子进程、线程等的运行。范围：3-600秒。'}">
              </nzi-help>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label>函数运行内存</nz-form-label>
            <nz-form-control>
              <nz-input-number formControlName="memorySize" [nzMin]="128" [nzMax]="3072" [nzStep]="128"
                [nzFormatter]="formatterMemorySize" nz-popover nzContent="128-3072MB">
              </nz-input-number>MB
              <nzi-help [options]="{'title':'函数运行时最大能使用的内存大小，最大3072MB。'}"></nzi-help>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item *ngIf="isShowSingle">
            <nz-form-label>单实例并发数量</nz-form-label>
            <nz-form-control>
              <nz-input-number formControlName="concurrency" [nzMin]="1" [nzMax]="20" nz-popover
                [nzStep]="1">
              </nz-input-number>个
              <nzi-help [options]="{'title':'单个实例能够并发处理的请求数'}"></nzi-help>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label>预留实例数量</nz-form-label>
            <nz-form-control>
              <nz-input-number formControlName="reserveNumber" [nzMin]="0" [nzMax]="5" nz-popover nzContent="0-5个"
                [nzStep]="1">
              </nz-input-number>个
              <nzi-help [options]="{'title':'预留实例是将函数实例的分配和释放交由用户管理，根据实例的运行时长计费。<br/>预留实例的执行环境是长驻的，彻底消除冷启动对业务的影响。'}">
              </nzi-help>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label>环境变量</nz-form-label>
            <nz-form-control class="env-block">
              <!--环境变量表格start-->
              <app-environment-variables [envVariableData]="envVariablesData" [needValid]="needValid"
                (getEnvVariables)="getEnvVariables($event)"></app-environment-variables>
              <!--环境变量表格end-->
            </nz-form-control>
          </nz-form-item>

          <ng-container *ngIf="runtime != RuntimeCustomContainer">
            <nz-form-item>
              <nz-form-label>初始化函数</nz-form-label>
              <nz-form-control>
                <nz-switch [(ngModel)]="isInitialize" formControlName="isInitialize" nzCheckedChildren="开启"
                  nzUnCheckedChildren="关闭"></nz-switch>
                <nzi-help [options]="{'title':'配置初始化函数后需实现对应的 initializer 接口。'}">
                </nzi-help>
              </nz-form-control>
            </nz-form-item>
            <ng-container *ngIf="isInitialize">
              <div>
                <nz-form-item>
                  <nz-form-control>
                    <input nz-input formControlName="initializeHandler" placeholder="请输入函数初始化入口" [maxlength]="255">
                    <nzi-help *ngIf="runtime?.indexOf('python') >= 0"
                      [options]="{'title':'函数初始化入口格式为 [文件名].[函数名]。例如函数初始化入口为 index.initialize，那么文件名为 index.py，初始化函数为 initialize。'}">
                    </nzi-help>
                    <nzi-help *ngIf="runtime?.indexOf('nodejs') >= 0"
                      [options]="{'title':'函数初始化入口格式为 [文件名].[函数名]。例如函数初始化入口为 index.initialize，那么文件名为 index.js，初始化函数为 initialize。'}">
                    </nzi-help>
                    <nzi-help *ngIf="runtime?.indexOf('golang') >= 0"
                      [options]="{'title':'Go 的函数初始化入口为可执行二进制文件的文件名称，与函数入口相同。'}">
                    </nzi-help>
                    <nzi-help *ngIf="runtime?.indexOf('java') >= 0"
                      [options]="{'title':'函数初始化入口的格式为 [package].[class]::[method]。例如包名是 example，类名是 HelloFC，那么创建函数时指定的函数初始化入口为 example.HelloFC::initialize。'}">
                    </nzi-help>
                  </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                  <nz-form-control>
                    <nz-input-number formControlName="initializeTimeout" [nzMin]="3" [nzMax]="300" nz-popover
                      nzContent="3-300秒" [nzStep]="1">
                    </nz-input-number>秒
                    <nzi-help [options]="{'title':'初始化超时时间。'}">
                    </nzi-help>
                  </nz-form-control>
                </nz-form-item>
              </div>
            </ng-container>
          </ng-container>

          <nz-form-item *ngIf="isInternetAccess">
            <nz-form-label>公网访问</nz-form-label>
            <nz-form-control>
              <nz-switch formControlName="internetAccess" [(ngModel)]="isInternetAccess" nzCheckedChildren="开启"
                nzUnCheckedChildren="关闭"></nz-switch>
              <nzi-help [options]="{'title':'使函数可以访问公网资源。'}"></nzi-help>
            </nz-form-control>
          </nz-form-item>
          <nz-form-item>
            <nz-form-label>私有网络<span class="required-icon" *ngIf="isVirtualAccess">*</span></nz-form-label>
            <nz-form-control>
              <nz-switch formControlName="virtualAccess" [(ngModel)]="isVirtualAccess"
                (ngModelChange)="virtualAccessChange($event)" nzCheckedChildren="开启" nzUnCheckedChildren="关闭">
              </nz-switch>
              <nzi-help [options]="{'title':'使函数可访问私有网络（VPC）中的资源，例如数据库，Redis 等。'}"></nzi-help>
              <ng-container *ngIf="isVirtualAccess">
                <div class="vpc-container">
                  <nz-select formControlName="vpc" class="vpc-item" [class.has-error]="vpcError" [nzShowSearch]="true"
                    nzShowSearch nzPlaceHolder="请选择虚拟私有网络" [nzLoading]="isLoadingVPC" nzNotFoundContent="没有可用的虚拟私有网络"
                    [nzAutoClearSearchValue]="true" [(ngModel)]="vpcId" (ngModelChange)="vpcChange($event)">
                    <nz-option *ngFor="let object of vpcList" [nzLabel]="object.vpc_name" [nzValue]="object.vpc_id">
                    </nz-option>
                  </nz-select>
                  <nz-select formControlName="subnet" class="vpc-item" [class.has-error]="subnetError"
                    [nzShowSearch]="true" nzShowSearch nzPlaceHolder="请选择子网" nzNotFoundContent="没有可用的子网"
                    [nzAutoClearSearchValue]="true" [(ngModel)]="subnetId" (ngModelChange)="subnetChange($event)">
                    <nz-option *ngFor="let object of subnetList" [nzLabel]="object.subnet_name"
                      [nzValue]="object.subnet_id">
                    </nz-option>
                  </nz-select>
                  <a href="javascript:void(0)" (click)="createVPC()">新建私有网络</a>
                </div>
              </ng-container>
            </nz-form-control>
          </nz-form-item>
					<nz-form-item>
            <nz-form-label>层配置</nz-form-label>
            <nz-form-control>
              <nz-switch formControlName="bindingLayers"  [(ngModel)]="isBindingLayers"
                (ngModelChange)="virtualLayersChange($event)" nzCheckedChildren="开启" nzUnCheckedChildren="关闭">
              </nz-switch>
							<nzi-help [options]="{'title':'使用层中的依赖代码包'}"></nzi-help>
						</nz-form-control>
          </nz-form-item>
					<ng-container *ngIf="isBindingLayers">
					<nz-form-item>
            <nz-form-label></nz-form-label>
            <nz-form-control class="layerSpe">
							<div class="form-group-edit-wrapper">
								<ng-container formArrayName="layersList" *ngFor="let control of layersList.controls; let i = index;">
									<div class="input-number-container" [formGroupName]="i" style="width: 80%;border-bottom: none;">
										<nz-select nzPlaceHolder="请选择层" formControlName="layer" class="input-select"  (ngModelChange)="changeLayer($event,i)">
											<nz-option *ngFor="let option of layerList" [nzLabel]="option.layerName" [nzValue]="option.layerId"></nz-option>
										</nz-select>
										<nz-select nzPlaceHolder="请选择层版本" formControlName="layerVersion" class="input-select">
											<nz-option *ngFor="let option of layerVersionList" [nzLabel]="option.version" [nzValue]="option.versionId"></nz-option>
										</nz-select>
										<i *ngIf="layersList.length == 1" nz-icon nzType="minus-circle" nzTheme="outline" disabled></i>
										<i *ngIf="layersList.length > 1" nz-icon nzType="minus-circle" nzTheme="outline"
											(click)="removeField(i, 'layersList')"></i>
									</div>
								</ng-container>
								<div class="add-action">
									<ng-container *ngIf="layerMax">
										<span style="color: #f04134;">
												最多添加{{layerLength > 5 ? 5 : layerLength}}个层
										</span>
									</ng-container>
									<ng-container *ngIf="!layerMax">
									<a (click)="addField('layersList')">
										<i nz-icon nzType="plus-circle" nzTheme="outline"></i>
										添加层({{layersList.controls.length}}/5)
									</a>
								 </ng-container>
								</div>
							</div>
						</nz-form-control>
          </nz-form-item>
				</ng-container>
          <nz-form-item *ngIf="runtime != RuntimeCustomContainer">
            <nz-form-label>代码上传方式</nz-form-label>
            <nz-form-control>
              <nz-radio-group formControlName="upload" [(ngModel)]="uploadType"
                (ngModelChange)="uploadTypeChange($event)">
                <label nz-radio-button *ngFor="let object of uploadTypeList" [nzDisabled]="((object.value === 'upload' || object.value === 'oss') && createType === 'template')"
                  [nzValue]="object.value">{{object.label}}</label>
              </nz-radio-group>
            </nz-form-control>
          </nz-form-item>
          <ng-container [ngSwitch]="uploadType" *ngIf="runtime != RuntimeCustomContainer">
            <!-- 本地上传 -->
            <ng-container *ngSwitchCase="'upload'">
              <nz-spin [nzSpinning]="isCodeLoading" nzTip="下载代码中...">
                <nz-form-item>
                  <nz-form-label>文件<span class="required-icon">*</span></nz-form-label>
                  <nz-form-control>
                    <input class="file-upload-input" *ngIf="runtime.indexOf('java8') < 0 "
                      [ngStyle]="{'border-color': (isZipFile === false || exceedFileMaxSize === true) ? '#f04134':'','box-shadow':((isZipFile === false || exceedFileMaxSize ===true) && focusFileInput === true)?'0 0 0 2px rgba(240, 65, 52, 0.2)':''}"
                      (focus)="focusFileName()" (blur)="blurFileName()" formControlName="fileName"
                      [placeholder]="filePlaceholder" readonly="readonly" nz-input>
                    <input class="file-upload-input" *ngIf="runtime.indexOf('java8') >= 0 "
                      [ngStyle]="{'border-color': ((isZipFile === false && isJarFile === false) || exceedFileMaxSize === true) ? '#f04134':'','box-shadow':(((isZipFile === false && isJarFile === false) || exceedFileMaxSize ===true) && focusFileInput === true)?'0 0 0 2px rgba(240, 65, 52, 0.2)':''}"
                      (focus)="focusFileName()" (blur)="blurFileName()" formControlName="fileName"
                      [placeholder]="filePlaceholder" readonly="readonly" nz-input>
                    <button class="file-upload-button" [nzType]="'primary'" (click)="fileInput.click()"
                      nz-button>选择</button>
                    <span class="file-upload-span">
                      <input type="file" #fileInput [accept]="acceptType" (change)="onChange($event)">
                    </span>
                    <nz-form-explain *ngIf="runtime.indexOf('java8') < 0"
                      [ngStyle]="{ 'color' : (isZipFile === false || exceedFileMaxSize ===true || getInvalidMessage('fileName')===true) ? '#f04134':'#bababa'}">
                      上传文件格式为 zip，大小限制为 {{fileMaxSize}}MB，大于 {{fileMaxSize}}MB 文件请通过对象存储上传
                    </nz-form-explain>
                    <nz-form-explain *ngIf="runtime.indexOf('java8') >= 0"
                      [ngStyle]="{ 'color' : ((isZipFile === false && isJarFile === false)|| exceedFileMaxSize ===true || getInvalidMessage('fileName')===true) ? '#f04134':'#bababa'}">
                      上传文件格式为 zip/jar，大小限制为 {{fileMaxSize}}MB，大于 {{fileMaxSize}}MB 文件请通过对象存储上传
                    </nz-form-explain>
                  </nz-form-control>
                </nz-form-item>
              </nz-spin>
            </ng-container>
            <!-- 从 OSS 上传 -->
            <ng-container *ngSwitchCase="'oss'">
              <nz-form-item>
                <nz-form-label>OSS Bucket<span class="required-icon">*</span></nz-form-label>
                <nz-form-control>
                  <nz-select formControlName="ossBucket" [nzShowSearch]="true" nzShowSearch
                    nzPlaceHolder="请选择OSS Bucket" [nzLoading]="isLoadingBucket" nzNotFoundContent="没有可用的Bucket"
                    [nzAutoClearSearchValue]="false" [(ngModel)]="ossBucket">
                    <nz-option *ngFor="let object of ossBucketList" [nzLabel]="object.label" [nzValue]="object.value">
                    </nz-option>
                  </nz-select>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <nz-form-label>OSS对象文件<span class="required-icon">*</span></nz-form-label>
                <nz-form-control>
                  <input formControlName="ossFile" placeholder="请输入oss对象文件路径，以/开头，以 .zip 结尾"
                    (ngModelChange)="ossFileChange($event)" nz-input>
                  <nz-form-explain style="margin-left:0;" *ngIf="getInvalidMessage('ossFile')">
                    oss对象文件是以 Bucket 根目录（"/"）开始，以 zip 代码文件结尾的完整路径，例如:"/text/demo.zip"
                  </nz-form-explain>
                  <nz-form-explain *ngIf="!getInvalidMessage('ossFile')">
                    oss对象文件是以 Bucket 根目录（"/"）开始，以 zip 代码文件结尾的完整路径，例如:"/text/demo.zip"
                  </nz-form-explain>
                </nz-form-control>
              </nz-form-item>
            </ng-container>
            <!-- 在线编辑 -->
            <ng-container *ngSwitchDefault>
              <nz-spin [nzSpinning]="isCodeLoading" style="padding-left: 1.52rem;">
                <div style="width: 100%;height: 6rem;border: #ececec solid 1px;margin-bottom: 15px;">
                  <iframe [src]="ideUrl" frameborder="0" style="width: 100%;height: 100%;" #codeEditor></iframe>
                  <div *ngIf="isCodeLoading"
                    style="position: absolute;width: 100%;height: 100%;background-color: #fff;top: 0;left: 0;transition: 0.3s all;">
                  </div>
                </div>
              </nz-spin>
            </ng-container>
          </ng-container>

        </ng-container>

        <ng-container *ngIf="createType === 'template' && isTemplateList === true">
          <nz-spin [nzSpinning]="isLoadingTemplates">
            <nz-form-item style="position: absolute;right: -10px;top: -44px;">
              <div class="search-tpl pull-right">
                <!-- 搜索 -->
                <!-- <nz-input-group nzSearch [nzAddOnAfter]="suffixIconButton" class="search-tpl-input">
                  <input type="text" nzSize="large" nz-input placeholder="请输入模板名称" [(ngModel)]="searchTplValue"
                    [ngModelOptions]="{standalone: true}" (keyup.enter)="getTemplateList()">
                </nz-input-group>
                <ng-template #suffixIconButton>
                  <button class="search-btn" nz-button nzSearch (click)="getTemplateList()">
                    <i class="anticon anticon-search search-icon"></i>
                  </button>
                </ng-template> -->

                <nz-input-group nzSearch [nzSuffix]="suffixIconButton" style="width: 2rem;">
                  <input type="text" [(ngModel)]="searchTplValue" nz-input placeholder="请输入模板名称查询" (keyup.enter)="getTemplateList()" [ngModelOptions]="{standalone: true}">
                </nz-input-group>
                <ng-template #suffixIconButton>
                  <i nz-icon class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="searchTplValue" (click)="searchTplValue = '';getTemplateList()"></i>
                  <button nz-button nzSearch (click)="getTemplateList()">
                    <i class="anticon anticon-search"></i>
                  </button>
                </ng-template>



                <button nz-button class="table-top-opt" (click)="refreshTemplateList()" nz-popover [nzContent]="'刷新'"><i
                    class="anticon anticon-reload"></i></button>
              </div>
            </nz-form-item>
            <div class="condition-bg">
              <nz-form-item>
                <nz-form-label class="space-class" style="width: 0.9rem;">场景</nz-form-label>
                <nz-form-control style="padding-left: 1.12rem;">
                  <nz-radio-group [ngModelOptions]="{standalone: true}" [(ngModel)]="sceneClassfy"
                    (ngModelChange)="sceneClassfyChange($event)">
                    <label class="space-label" nz-radio-button *ngFor="let object of sceneClassifyList"
                      [nzValue]="object.name">{{object.displayName}}</label>
                  </nz-radio-group>
                </nz-form-control>
              </nz-form-item>
              <nz-form-item>
                <nz-form-label class="space-class" style="width: 0.9rem;">语言</nz-form-label>
                <nz-form-control style="padding-left: 1.12rem;">
                  <nz-radio-group [ngModelOptions]="{standalone: true}" [(ngModel)]="runtimeClassfy"
                    (ngModelChange)="runtimeClassfyChange($event)">
                    <label class="space-label" nz-radio-button *ngFor="let object of runtimeClassifyList"
                      [nzValue]="object.key">{{object.value}}</label>
                  </nz-radio-group>
                </nz-form-control>
              </nz-form-item>
            </div>
            <nz-form-item>
              <ng-container *ngFor="let item of templateList;let i=index;">
                <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"
                  [ngClass]="{'pl0': i%4 ===0 ? true:false,'prt0': i%4 === 3 ? true:false}">
                  <div class="tpl-card">
                    <div class="tpl-card-title">
                      <ng-container *ngIf="item?.runtime.indexOf('python') >= 0">
                        <svg class="icon icon-position" aria-hidden="true">
                          <use xlink:href="#icon-runtimepython"></use>
                        </svg>
                      </ng-container>
                      <ng-container *ngIf="item?.runtime.indexOf('nodejs') >= 0">
                        <svg class="icon icon-position" aria-hidden="true">
                          <use xlink:href="#icon-runtimeNodejs"></use>
                        </svg>
                      </ng-container>
                      <ng-container *ngIf="item?.runtime.indexOf('java') >= 0">
                        <svg class="icon icon-position" aria-hidden="true">
                          <use xlink:href="#icon-runtimejava"></use>
                        </svg>
                      </ng-container>
                      <ng-container *ngIf="item?.runtime.indexOf('golang') >= 0">
                        <svg class="icon icon-position" aria-hidden="true">
                          <use xlink:href="#icon-runtimego"></use>
                        </svg>
                      </ng-container>
                      <span class="card-name">{{ item?.displayName }}</span>
                    </div>
                    <div class="tpl-card-content">
                      <div class="card-content-item">
                        <span class="tpl-card-left">运行环境：</span>
                        <span class="tpl-card-right">{{ item?.runtime }}</span>
                      </div>
                      <div class="card-content-item">
                        <span class="tpl-card-left">描述：</span>
                        <span class="tpl-card-right tpl-card-describe">{{ item?.describe
                          }}</span>
                      </div>
                      <div class="card-content-item" style="text-align: right;">
                        <a class="detail-right" (click)="gotoTplDetail(item,$event)">模板详情</a>
                        <a class="detail-right" (click)="useTplInTplList(item,$event)">使用模板</a>
                      </div>
                    </div>
                  </div>
                </div>
              </ng-container>
            </nz-form-item>
            <nz-form-item style="margin-top: 20px;">
              <div class="pull-right">
                <nz-pagination [(nzPageIndex)]="tplPageNo" [(nzPageSize)]="tplPageSize" [nzTotal]="tplTotal"
                  (nzPageIndexChange)="getTemplateList()" (nzPageSizeChange)="getTemplateList()"
                  [nzHideOnSinglePage]="tplTotal <= 12" [nzPageSizeOptions]="[12,24,36,48,96]" nzShowQuickJumper
                  nzShowSizeChanger>
                </nz-pagination>
              </div>
            </nz-form-item>
          </nz-spin>
        </ng-container>
        <nz-form-item
          *ngIf="createType==='template' && !isTemplateList && !isTemplateDetail && checkedTpl?.triggerMetadataList?.length > 0">
          <nz-form-label>触发器</nz-form-label>
          <nz-form-control>
            <app-fcs-create-trigger [triggersData]="checkedTpl?.triggerMetadataList" #triggerCreate>
            </app-fcs-create-trigger>
          </nz-form-control>
        </nz-form-item>
      </form>
    </nzi-form>
    <ng-container *ngIf="!isTemplateList && !isTemplateDetail">
      <!-- <div class="button-form button-left">
        <button nz-button nzi-debounce-click debounceTime="1000" nzType="primary" (debounceClick)="submit()">
          <span>提交</span>
        </button>
        <button nz-button nzi-debounce-click debounceTime="1000" (debounceClick)="cancel()">
          <span>返回</span>
        </button>
      </div> -->


      <div class="footer-form">
        <div class="pull-right">
          <button nz-button nzi-debounce-click debounceTime="1000" nzType="primary" (debounceClick)="submit()">
            <span>提交</span>
          </button>
          <button nz-button nzi-debounce-click debounceTime="1000" (debounceClick)="cancel()">
            <span>返回</span>
          </button>
        </div>
      </div>

    </ng-container>
  </ng-container>
  <ng-container *ngIf="isTemplateDetail">
    <div class="tpl-title"><span>模板详情</span></div>
    <div class="form-fieldset form-horizontal form-align-left tpl-fieldset">
      <fieldset>
        <legend>
          基本信息
        </legend>
        <div class="form-static">
          <div class="form-group">
            <label class="control-label col-em-7">名称：</label>
            <div class="col-em-offset-7">
              <p class="form-control-static">{{theTplDetail?.displayName}}</p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-em-7">语言：</label>
            <div class="col-em-offset-7">
              <p class="form-control-static">
                {{theTplDetail?.runtime}}
              </p>
            </div>
          </div>
          <div class="form-group">
            <label class="control-label col-em-7">描述：</label>
            <div class="col-em-offset-7">
              <p class="form-control-static">{{ theTplDetail?.describe }}</p>
            </div>
          </div>
        </div>
      </fieldset>
    </div>
    <div *ngIf="!!theTplDetail?.detail?.input" class="form-fieldset form-horizontal form-align-left tpl-fieldset">
      <fieldset>
        <legend>
          输入参数
        </legend>
        <div class="form-static">
          <div class="form-group" *ngFor="let item of theTplDetail?.detail?.inputArr;let i=index;">
            <ng-container *ngIf="item !== ''">
              <label class="control-label col-em-7">{{ item?.trim().split(':')[0] + '：' }}</label>
              <div class="col-em-offset-7">
                <p class="form-control-static">{{item?.trim().split(':')[1]}}</p>
              </div>
            </ng-container>
          </div>
        </div>
      </fieldset>
    </div>
    <div *ngIf="!!theTplDetail?.detail?.output" class="form-fieldset form-horizontal form-align-left tpl-fieldset">
      <fieldset>
        <legend>
          输出参数
        </legend>
        <div class="form-static">
          <div class="form-group" *ngFor="let item of theTplDetail?.detail?.outputArr;let i=index;">
            <ng-container *ngIf="item !== ''">
              <label class="control-label col-em-7">{{ item?.trim().split(':')[0] + '：' }}</label>
              <div class="col-em-offset-7">
                <p class="form-control-static">{{item?.trim().split(':')[1]}}</p>
              </div>
            </ng-container>
          </div>
        </div>
      </fieldset>
    </div>
    <div *ngIf="!!theTplDetail?.detail?.warning" class="form-fieldset form-horizontal form-align-left tpl-fieldset">
      <fieldset>
        <legend>
          注意事项
        </legend>
        <div class="form-static">
          <div class="form-group" *ngFor="let item of theTplDetail?.detail?.warningArr;let i=index;">
            <ng-container *ngIf="item !== ''">
              <label class="control-label col-em-7">{{ item?.trim().split('.')[0] + '.' }}</label>
              <div class="col-em-offset-7">
                <p class="form-control-static">{{item?.trim().split('.')[1]}}</p>
              </div>
            </ng-container>
          </div>
        </div>
      </fieldset>
    </div>
    <div class="form-fieldset form-horizontal form-align-left tpl-fieldset"
      *ngIf="theTplDetail?.triggerMetadataList.length > 0">
      <fieldset>
        <legend>
          触发器
        </legend>
        <div class="form-static">
          <div class="form-group">
            <div class="form-item tpl-detail-param">
              <nz-table #basicTable [nzData]="theTplDetail?.triggerMetadataList" [nzShowPagination]="false">
                <thead>
                  <tr>
                    <th>名称</th>
                    <th>类型</th>
                    <th>配置</th>
                  </tr>
                </thead>
                <tbody>
                  <tr *ngFor="let data of basicTable.data">
                    <td>{{data.name}}</td>
                    <ng-container [ngSwitch]="data?.type">
                      <td *ngSwitchCase="'timer'">定时触发器</td>
                      <td *ngSwitchCase="'oss'">对象存储触发器</td>
                      <td *ngSwitchCase="'apig'">API 网关触发器</td>
                    </ng-container>
                    <td>{{data.config || '--'}}</td>
                  </tr>
                </tbody>
              </nz-table>
            </div>
          </div>
        </div>
      </fieldset>
    </div>
    <!-- <div class="tpl-detail-footer">
      <button nz-button nzType="primary" class="space-right" (click)="useTplInTplDetail()">使用模板</button>
      <button nz-button nzType="default" (click)="tplDetailBack()">返回</button>
    </div> -->


    <div class="footer-form">
      <div class="pull-right">
        <button nz-button nzType="primary" (click)="useTplInTplDetail()">
          <span>使用模板</span>
        </button>
        <button nz-button (click)="tplDetailBack()">
          <span>返回</span>
        </button>
      </div>
    </div>

  </ng-container>
</div>